<template>
  <el-dialog v-model="visible" title="借还详情" width="80%"
    ><el-row :gutter="24">
      <el-col :span="8">
        <div
          class="relative flex flex-wrap mb-2"
          style="height: 100%; max-height: 100%"
        >
          <el-image
            v-for="(item, index) in picUrl"
            :key="index"
            :src="item"
            :initial-index="index"
            class="flex-1 mr-1"
            fit="cover"
            :preview-src-list="picUrl"
            preview-teleported
          />
          <div class="tags font-bold">工具图片</div>
        </div>
      </el-col>
      <el-col :span="16">
        <el-descriptions :column="2" border>
          <el-descriptions-item
            v-for="(item, index) in infoList"
            :key="index"
            :label="item.label"
          >
            {{ item.formatter ? item.formatter(info) : info[item.prop] }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { detailApi } from "@/api/record/list";
import { diffDate } from "@/utils";
import { format } from "path";
import dayjs from "dayjs";
const visible = ref(false);
const infoList = [
  { label: "物件名称", formatter: val => val.tool.name },
  { label: "借出期限", formatter: val => val.tool.maxLendTime + "小时" },
  { label: "物件编号", formatter: val => val.tool.code },
  {
    label: "借出类型",
    formatter: ({ type }) => (type == 1 ? "借出" : "归还")
  },
  { label: "分类", formatter: val => val.tool.toolCategoryName },
  {
    label: "发生时间",
    formatter: row => (row.type == 1 ? row.lendTime : row.returnTime)
  },
  { label: "品牌", formatter: row => row.tool.brandName },
  {
    label: "使用时长",
    formatter: ({ isReturn, lendTime, returnTime }) => {
      // 未归还:当前时间-借出时间
      // 己归还: 归还时间 - 借出时间
      return diffDate(lendTime, Number(isReturn) ? returnTime : null);
    }
  },
  { label: "型号", formatter: val => val.tool.modelName },
  {
    label: "使用状态",
    formatter: ({ useState }) => {
      let text = "";
      switch (Number(useState)) {
        case 1:
          text = "正常";
          break;
        case 2:
          text = "超时借出";
          break;
        case 3:
          text = "正常归还";
          break;
        case 4:
          text = "归还超时";
          break;
      }
      return text;
    }
  },
  {
    label: "标签",
    formatter: val => (val.tool.isLabel == 1 ? "有标签" : "无标签")
  },
  { label: "账号", prop: "userName" },
  { label: "标签编码", formatter: val => val.tool.labelCode || "-" },
  { label: "用户名称", prop: "nickName" },
  { label: "存放位置", formatter: val => val.tool.storageLocation },
  { label: "角色", prop: "roleName" }
];

const info = ref({} as any);
const picUrl = computed(() => {
  if (info.value.tool && info.value.tool.picUrl) {
    const list = info.value.tool.picUrl.split(",");
    return list;
  }
  return [];
});
const show = (data = {}) => {
  visible.value = true;
  // initData(1);
  info.value = data;
};
defineExpose({ show });

const initData = recordId => {
  detailApi({ recordId }).then(res => {
    console.log(res);
  });
};
</script>

<style lang="scss" scoped>
.tags {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px 10px;
  background: rgb(255 255 255 / 70%);
  border-radius: 0 10px 0 0;
}
</style>
